<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description"
          content="Probably the most complete UI kit out there. Multiple functionalities and controls added,  extended color palette and beautiful typography, designed as its own extended version of Bootstrap at  the highest level of quality.                             ">
    <meta name="author" content="Webpixels">
    <title>Boomerang UI Kit - Free Bootstrap Framework by Webpixels</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800|Roboto:400,500,700" rel="stylesheet">
    <!-- Theme CSS -->
    <link type="text/css" href="./assets/css/theme.css" rel="stylesheet">
    <!-- Demo CSS - No need to use these in your project -->
    <link type="text/css" href="./assets/css/demo.css" rel="stylesheet">
</head>
<body>

    <h1>
        输入验证码
    </h1>
    <div class="input-group mb-3">
        <div>
            <input id="inputCaptcha" type="text" class="form-control"  aria-describedby="basic-addon2">
        </div>
        <div class="input-group-append">
            <span class="input-group-text" id="basic-addon2">
                <img id="verificationCodeImg" src="/admin/captcha" title="看不清? 换一张" alt="访问图片出错">
            </span>
        </div>
        <button type="button" class="btn btn-success" id="submitButton">提交</button>
    </div>


<!-- Core -->
<script src="./assets/vendor/jquery/jquery.min.js"></script>
<script src="./assets/vendor/popper/popper.min.js"></script>
<script src="./assets/js/bootstrap/bootstrap.min.js"></script>
<!-- FontAwesome 5 -->
<script src="./assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
<!-- Page plugins -->
<script src="./assets/vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="./assets/vendor/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
<script src="./assets/vendor/input-mask/input-mask.min.js"></script>
<script src="./assets/vendor/nouislider/js/nouislider.min.js"></script>
<script src="./assets/vendor/textarea-autosize/textarea-autosize.min.js"></script>
<!-- Theme JS -->
<script src="./assets/js/theme.js"></script>

<script>
    $(function () {
        $("#verificationCodeImg").click(function () {
            $(this).hide().attr('src', '/admin/captcha?dt=' + new Date().getTime()).fadeIn();
            // $(this).attr('src', '/admin/captcha?dt=' + new Date().getTime());
        });
    });

    submitCaptcha();

    function submitCaptcha() {
        let submitButton = document.querySelector("#submitButton");
        let inputCaptcha = document.querySelector("#inputCaptcha");
        submitButton.onclick = function () {
            $.ajax({
                type: 'post',
                url: "/admin/check",
                data: {
                    'captcha': inputCaptcha.value
                },
                success: function (result) {
                    if (result != null && result === true) {
                        location.href = "https://www.baidu.com";
                    } else {
                        alert("验证码出错");
                    }
                }
            });
        }
    }

</script>


</body>
</html>
